<template>
  <div class="box">
    <div class="rowone">
      <el-row type="flex" class="row-bg" :gutter="24">
        <el-col :span="5">
          <el-input
            placeholder="搜索借款方"
            suffix-icon="el-icon-search"
            v-model="requirement.userName"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="搜索借款人手机号"
            suffix-icon="el-icon-search"
            v-model="requirement.userPhone"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="requirement.status"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <TableComponent
      :cols="cols"
      :table-data="tableData"
      :total="total"
      @requestData="requestData"
    >
      <template slot="endTime" slot-scope="scope">
        {{getEndTime(scope)}}
      </template>
      <template slot="operating" slot-scope="scope">
        <el-button size="medium" @click="onClickReview(scope)">复审</el-button>
      </template>
    </TableComponent>
  </div>
</template>

<script>
import TableComponent from "../../components/basic/TableComponent";
import { getFullBidFrom } from "../../http/loan";

export default {
  name: "Loan",
  components: {
    TableComponent,
  },
  data() {
    return {
      cols: {
        id: "借款编号",
        userName: "借款方",
        userPhone: "借款人手机",
        name: "借款名称",
        total: "借款金额",
        apr: "年化利率(%)",
        repayment: "还款方式",
        loanPeriod: "期限(天)",
        recruitmentTime: {
          addr: ["borrowSubjectInfo"],
          title: "募集时长",
        },
        raisedAmount: {
          addr: ["borrowSubjectInfo"],
          title: "募集资金",
        },
        investmentProgress: "投资进度(%)",
        saleTime: {
          addr: ["borrowSubjectInfo"],
          title: "开售时间",
        },
        endTime: {
          custom: true,
          title: "结束时间",
        },
        status: "状态",
      },
      requirement: {
        name: "", //新标名称
        userName: "", //借款方名称
        userPhone: "", //借款方手机
        status: "全部状态", //新标状态
        loanType: "", //借款类型
      },
      total: 0,
      tableData: [],
      page: 1,
      limit: 5,
      options: [
        {
          value: "全部状态",
        },
        {
          value: "满标",
        },
        {
          value: "未满标",
        }
      ],
    };
  },
  methods: {
    requestData(page, limit, requirement) {
      this.page = page;
      this.limit = limit;
      getFullBidFrom(page, limit, requirement)
        .then((res) => {
          if (res.data.code == 20000) {
            this.total = res.data.data.total;
            this.tableData = res.data.data.rows;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.err(err);
          this.$message.error("数据加载失败！详情见日志");
        });
    },
    onClickSearch() {
      this.requestData(1, 5, this.requirement);
    },
    onClickReview(scope) {
      this.$router.push(`/loan/loanfullb/loanreviewde/${scope.data.data.id}`);
    },
    getEndTime(scope) {
      let data = scope.data.data;
      function f(t) {
        return t < 10 ? `0${t}` : t;
      }
      if(data.borrowSubjectInfo && data.borrowSubjectInfo.saleTime && data.loanPeriod) {
        let time = new Date(data.borrowSubjectInfo.saleTime);
        time = new Date(time.getTime() + data.loanPeriod * 1000 * 60 * 60 * 24);
        return `${time.getFullYear()}-${f(time.getMonth() + 1)}-${f(time.getDate())} ${f(time.getHours())}:${f(time.getMinutes())}:${f(time.getSeconds())}`;
      }else{
        return "";
      }
    }
  },
  beforeMount() {
    this.requestData(1, 5);
  },
};
</script>

<style scoped>
.row-bg {
  padding: 20px 14px;
}
</style>